<template>
  <div class="searchBox">
    <div class="searchBox_top">
      <el-input
          v-model="queryParams.searchValue"
          placeholder="请输入"
          class="input-with-select"
      >
        <template #prepend>
          <el-button @click="searchHandler('icon')">
            <el-icon class="el-input__icon">
              <ele-Search/>
            </el-icon>
          </el-button>
        </template>
        <template #append v-if="paramsList.length>=1">
          <el-button type="primary" size="small" @click="showSearch=!showSearch">展开过滤</el-button>
        </template>
      </el-input>
    </div>
    <div class="query_params" v-show="showSearch">
      <el-form
          v-if="paramsList.length>=1"
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          class="inputmains">
        <template
            v-for="(item,index) in  paramsList"
            :key="item.label">
          <el-form-item
              :label="item.label"
              :prop="item.props"
          >
            <template v-if="item.type=='1'">
              <el-input v-model.trim="queryParams[item.props]" clearable :placeholder="item.placeholder"></el-input>
            </template>
            <template v-if="item.type=='2' || item.type=='3'">
              <el-select
                  v-model="queryParams[item.props]"
                  clearable
                  filterable
                  :placeholder="item.placeholder"
                  :multiple="item.type == '2'?true:false"
              >
                <el-option
                    v-for="(it,idx) in item.queryList"
                    :key="idx"
                    :label="it.label"
                    :value="it.value">
                </el-option>
              </el-select>
            </template>
            <template v-if="item.type=='4'">
              <el-date-picker
                  v-model="queryParams[item.props]"
                  type="daterange"
                  format="YYYY-MM-DD hh:mm"
                  value-format="YYYY-MM-DD hh:mm"
                  range-separator="~"
                  start-placeholder="开始"
                  end-placeholder="结束"
                  :placeholder="item.placeholder"
              >
              </el-date-picker>
            </template>
          </el-form-item>
        </template>
        <el-form-item>
          <el-button type="primary" @click="searchHandler('submit')">确定</el-button>
          <el-button @click="resetForm('queryForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {ref, getCurrentInstance, reactive} from "vue"


export default {
  name: "searchBox",
  components: {},
  props: {
    paramsList: {
      type: Array,
      default: [],
    },
    queryParams: {
      type: Object,
      default: {},
    }
  },
  data() {
    return {}
  },
  setup(props, context) {
    const {proxy} = getCurrentInstance();
    const showSearch = ref(false)
    let {queryParams} = reactive(props)
    const queryForm = ref();
    const searchHandler = (type) => {
      if (type == 'icon') {
        if (queryParams.searchValue == '') {
          proxy.$message({
            type: 'error',
            message: "请输入需要搜索的内容!"
          })
          return false
        }
      }
      context.emit("searchSubmit")
    }
    const resetForm = (formEl) => {
      console.log(queryForm)
      if (!formEl) return
      queryForm.value.resetFields();
      context.emit("searchSubmit")
    }
    return {
      showSearch,
      queryForm,

      resetForm,
      searchHandler
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {},
  computed: {},
  watch: {},
  beforeDestroy() {
  },
  destroyed() {
  }
}
</script>

<style scoped lang="scss">
.searchBox {
  position: relative;

  .searchBox_top {
    width: 350px;
    position: absolute;
    right: 0;
    top: -32px;
  }

  .query_params {
    padding-top: 15px;
  }
}
</style>